<script setup lang="ts">
    import { allPermissionAPI, addOrUpdateMenuAPI, removeMenu } from '@/network/acl/menu';
    import {onMounted, reactive, ref} from 'vue'
    import type { PermissionList, PermissionResponseData, PermissionData, MenuParams } from '@/network/acl/menu/type';
    import { ElMessage } from 'element-plus';
    const permissionArr = ref<PermissionList>([])
   async function getPermission() {
        const res: PermissionResponseData = await allPermissionAPI()
        console.log(res);
        if (res.code === 200) {
            permissionArr.value = res.data
        }
    }

    onMounted(() => {
        getPermission()
    })

    // 收集新增数据
    const menuParams = reactive<MenuParams>({
        pid: 0,
        level: 0,
        name: '',
        code: ''
    })

    // 添加与修改
    const dialogVisible = ref<boolean>(false)

    function addPermission(row: PermissionData) {
        // 清空信息
        delete menuParams.id
        Object.assign(menuParams, {
            pid: 0,
            level: 0,
            name: '',
            code: ''
        })
        console.log(row);
        dialogVisible.value = true
        menuParams.pid = row.id
        menuParams.level = row.level + 1
    }

    function updatePermission(row: PermissionData) {
        Object.assign(menuParams, row)
        dialogVisible.value = true
    }

    // 确定按钮
   async function save() {
        const res = await addOrUpdateMenuAPI(menuParams)
        console.log(res);
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: menuParams.id ? '修改子菜单成功' : '添加子菜单成功'
            })
            dialogVisible.value = false
            getPermission()
        } else {
            ElMessage({
                type: 'error',
                message: menuParams.id ? `修改失败 ${res.data}` : `添加失败 ${res.data}`
            })
        }
    }

    // 删除菜单
   async function deletePermission(row: PermissionData) {
        const res = await removeMenu(row.id)
        console.log(res);
        if (res.code === 200) {
            ElMessage({
                type: 'success',
                message: '删除菜单成功'
            })
            getPermission()
        } else {
            ElMessage({
                type: 'error',
                message: `删除菜单失败 ${res.data}`
            })
        }
    }
</script>


<template>
    <div>
        <el-table :data="permissionArr" style="width: 100%; margin-bottom: 20px;" row-key="id" border>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="code" label="权限值"></el-table-column>
            <el-table-column prop="updateTime" label="修改时间"></el-table-column>
            <el-table-column label="操作">
                <template #="{row, $index}">
                    <el-button v-has="'btn.Permission.add'" @click="addPermission(row)" size="small" type="primary" icon="" :disabled="row.level === 4">{{ row.level === 3 ? '添加功能' : '添加菜单' }}</el-button>
                    <el-button v-has="'btn.Permission.update'" @click="updatePermission(row)" size="small" type="primary" icon="" :disabled="row.level === 1">编辑</el-button>
                    <el-popconfirm @confirm="deletePermission(row)" :title="`确定要删除${row.name}吗？`" width="220px">
                        <template #reference>
                             <el-button v-has="'btn.Permission.remove'" size="small" type="danger" icon="" :disabled="row.level === 1">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 添加或更新菜单数据结构 -->
        <el-dialog v-model="dialogVisible" :title="menuParams.id ? '修改菜单' : '添加菜单'">
            <el-form>
                <el-form-item label="名称">
                    <el-input v-model="menuParams.name" placeholder="请输入菜单名称"></el-input>
                </el-form-item>
                <el-form-item label="权限">
                    <el-input v-model="menuParams.code" placeholder="请输入权限数值"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button @click="save" type="primary">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>


<style scoped lang='scss'>

</style>